<template>

  <div id="daohang">
    <div id="d1">
      <ul id="daohang1">
        <li><img src="../assets/logo.jpg" height="55px"></li>
        <li><router-link to=""><i class="el-icon-upload" style="font-size: 20px"></i>上传</router-link></li>
        <li><router-link to=""><i class="el-icon-download" style="font-size: 20px"></i>下载</router-link></li>
        <li><router-link to=""><i class="el-icon-delete-solid" style="font-size: 20px"></i>删除</router-link></li>
        <li><router-link to=""><i class="el-icon-edit-outline" style="font-size: 20px"></i>修改</router-link></li>
        <li><router-link to=""><i class="el-icon-search" style="font-size: 20px"></i>搜索</router-link></li>
<!--        <li><img src="./file/img/touxiang.jpg" width="40px"></li>-->
        <li><router-link to=""><i class="el-icon-user" style="font-size: 20px"></i>个人中心</router-link></li>
        <li><router-link to=""><i class="el-icon-switch-button" style="font-size: 20px"></i>登出</router-link></li>
      </ul>
    </div>
    <div id="d2">
      <ul id="daohang2">
        <li><router-link to=""><i class="el-icon-s-home" style="font-size: 20px"></i>首页</router-link></li>
        <li><router-link to="/daohang/viewImage"><i class="el-icon-picture-outline-round" style="font-size: 20px"></i>图片</router-link></li>
        <li><router-link to=""><i class="el-icon-tickets" style="font-size: 20px"></i>文档</router-link></li>
        <li><router-link to=""><i class="el-icon-headset" style="font-size: 20px"></i>音乐</router-link></li>
        <li><router-link to=""><i class="el-icon-video-camera" style="font-size: 20px"></i>视频</router-link></li>
        <li><router-link to=""><i class="el-icon-link" style="font-size: 20px"></i>我的分享</router-link></li>
        <li><router-link to="/daohang/garbage"><i class="el-icon-delete" style="font-size: 20px"></i>回收站</router-link></li>
        <li><router-link to=""><i class="el-icon-sort" style="font-size: 20px"></i>传输</router-link></li>
        <li><router-link to=""><i class="el-icon-lock" style="font-size: 20px"></i>隐私空间</router-link></li>

      </ul>
    </div>
    <div id="d3">

      <router-view></router-view>
    </div>
  </div>

</template>

<script>
export default {
  name: "daohang"
}
</script>

<style scoped>
  * {
    padding: 0;
    margin: 0;
  }
  body{
    overflow-x: hidden;
  }
  #daohang{/*设置导航栏的框框*/
    top:0;
    left:0;
    width: 100%;/*框框的宽度*/
    height: 700px;/*框框的长度*/
    border:1px solid #888797;/*添加边框 */
    position:fixed;
  }
  li{
    list-style-type: none;/* 去掉li前的点 */
    float: left;/*将li设置成做浮动，变为联动*/
    width: 154px;/*设置块的宽度*/
    height: 50px;/*设置块的长度*/
  }
  #d1{
    width: 1250px;
    height: 50px;
    background-color: #d2bdc6;
  }
  #d2{
    top: 51px;
    width: 154px;
    height: 700px;
    background-color: #d2bdc6;
  }
  #d3{
    top: 51px;
    left: 154px;
    width: 1096px;
    height: 650px;
    background-color: #eee2e6;
    position:fixed;
  }
  a{
    display: block;/*将a变成块状*/
    line-height: 50px;/*设置字体在块中的高度*/
    background-color: #d2bdc6;
    color: #fff;
    text-align: center;/*字体居中*/
    text-decoration: none;/*去掉下划线*/
    font-size: 15px;
  }
  button{
    margin:  4px 31px;
    padding: 11px 32px;
    background-color: #d2bdc6;
    border: none;
    border-radius: 17px;
    color: #fff;
    text-align: center;
    /*font-size: 15px;*/
  }
  a:hover,button:hover{
    background-color: #bea0ac;
  }
</style>
